import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {

  //1.constructor
  constructor(props) {
    super(props)

    //1)初始化状态
    this.state = {
      msg: '🐂',
      data: []
    }

    //2)创建ref
    this.ref = React.createRef()
    
    //3)修改事件this的指向
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    console.log('handleClick')
  }

  //2.getDerivedStateFromProps
  static getDerivedStateFromProps(props, state){
    return null
  }

  //3.render 返回一段JSX
  render() {
    return (
      <div>
        <div className="outerBox">
          <div className="innerBox">

          </div>
        </div>
        <input type="text" ref={this.ref} />
        {
          this.state.data.map(el=>{
            return <img src={el.image_src} alt="" key={el.goods_id} />
          })
        }
      </div>
    )
  }

  //4.componentDidMount
  //将组件挂载到DOM树上
  componentDidMount() {
    console.log(this.ref.current)
    //1)调接口
    axios.get('https://www.linweiqin.cn/api/public/v1/home/swiperdata').then(res=>{
      console.log(res)
      this.setState({
        data: res.data.message
      })
    })
    //2)订阅
    //todo redux subscribe 订阅数据

    //3)注册事件
    document.querySelector(".outerBox").addEventListener("scroll",function(e){
      console.log("盒子滚动啦",e);
    })
  }
}
